<a href="#" class="relative block rounded-tr-3xl border border-gray-100">
  <span
    class="absolute -top-px -right-px rounded-tr-3xl rounded-bl-3xl bg-rose-600 px-6 py-4 font-medium tracking-widest text-white uppercase"
  >
    Save 10%
  </span>

  <img
    src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt=""
    class="h-80 w-full rounded-tr-3xl object-cover"
  />

  <div class="p-4 text-center">
    <strong class="text-xl font-medium text-gray-900"> Aloe Vera </strong>

    <p class="mt-2 text-pretty text-gray-700">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum in
      eum vitae aliquid at sed dignissimos.
    </p>

    <span
      class="mt-4 block rounded-md border border-indigo-900 bg-indigo-900 px-5 py-3 text-sm font-medium tracking-widest text-white uppercase transition-colors hover:bg-white hover:text-indigo-900"
    >
      Learn More
    </span>
  </div>
</a>
